跳到主要内容

重构

AJAX 的实现主要依赖于 XMLHttpRequest 对象，但是在调用其进行异步数据传输时，由于 XMLHttpRequest 对象的实例在处理事件完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它时就得重新构建，而且每次调用都需要写一大段的代码，使用起来很不方便。虽然，现在很多开源的 AJAX 框架都提供了对 XMLHttpRequest 对象的封装方案，但是如果应用这些框架，通常需要加载很多额外的资源，这势必会浪费很多服务器资源。不过 JavaScript 脚本语言支持 OO 编码风格，通过它可以将 AJAX 所必需的功能封装在对象中。

AJAX 重构的步骤​

AJAX 重构大致可以分为以下 3 个步骤。

首先，打开冰箱​

创建一个单独的 JS 文件，名称为 AjaxRequest.js ，并且在该文件中编写重构 AJAX 所需的代码

var net = new Object(); //定义一个全局的变量
// 编写构造函数
net.AjaxRequest = function (url, onload, onerror, method, params) {
  this.req = null;
  this.onload = onload;
  this.onerror = onerror ? onerror : this.defaultError;
  this.loadDate(url, method, params);
};
// 编写用于初始化 XMLHttpRequest 对象并指定处理函数，最后发送 HTTP 请求的方法
net.AjaxRequest.prototype.loadDate = function (url, method, params) {
  if (!method) {
    method = 'GET'; // 设置默认的请求方式为 GET }
    if (window.XMLHttpRequest) {
      // 非 IE 浏览器
      this.req = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象
    } else if (window.ActiveXObject) {
      //IE 浏览器
      try {
        this.req = new ActiveXObject('Microsoft.XMLHTTP'); // 创建 XMLHttpRequest 对象
      } catch (e) {
        try {
          this.req = new ActiveXObject('Msxml2.XMLHTTP'); // 创建 XMLHttpRequest 对象
        } catch (e) {}
      }
    }

    if (this.req) {
      try {
        var loader = this;
        this.req.onreadystatechange = function () {
          net.AjaxRequest.onReadyState.call(loader);
        };
        this.req.open(method, url, true); // 建立对服务器的调用
        if (method == 'POST') {
          // 如果提交方式为 POST
          this.req.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded',
          ); // 设置请求的内容类型
          this.req.setRequestHeader('x-requested-with', 'ajax'); //设置请求的发出者
        }
        this.req.send(params); // 发送请求
      } catch (err) {
        this.onerror.call(this); // 调用错误处理函数
        // 重构回调函数
        var req = this.req;
        if (ready == 4) {
          // 请求完成
          if (req.status == 200) {
            // 请求成功

            this.onload.call(this);
            this.onerror.call(this); // 调用错误处理函数
          }
        }
      } // 重构默认的错误处理函数
      net.AjaxRequest.prototype.defaultError = function () {
        alert(
          ` 错误数据 \n\n 回调状态 : ${this.req.readyState} \n 状态 : ${this.req.status};`,
        );
      };
    }
  }
};

把大象塞进去​

在需要应用 AJAX 的页面中应用以下语句，包括步骤 1 中创建的 JS 文件

关上冰箱门​

在应用 AJAX 的页面中编写错误处理的方法、实例化 AJAX 对象的方法和回调函数

function onerror() {
  alert(' 您的操作有误！ ');
}

function getInfo() {
  var loader = new net.AjaxRequest(
    'check.php?nocache=' + new Date().getTime(),
    deal_getInfo,
    onerror,
    'GET',
  );
}

function deal_getInfo() {
  document.getElementById('showInfo').innerHTML = this.req.responseText;
}

实时显示商城公告​

  • 编写 AjaxRequest.js 文件，并将其保存到 JS 文件夹中
  • 编写 index.php 文件，并在该文件中包含 AjaxRequest.js 文件
  • 在 index.php 页面中编写错误处理的函数、实例化 AJAX 对象的方法和回调函数
  • 在 index.php 文件的合适位置添加一个<div> 标记，并且将该标记的 id 属性设置为 showInfo 。在本实例中，由于要实现滚动显示商城公告，所以还添加了

多级联动下拉列表​

多级联动下拉列表是指一组相互关联的下拉列表。在这组下拉列表中，相邻的两个下拉列表是父子关系，改变父下拉列表的值，子下拉列表也随之改变。这样的多级联动下拉列表可以辅助用户快速选择自己所需项目，方便用户操作。在 Tomcat 服务器下运行程序，在页面中将显示一个三级联动下拉列表，用于选择用户的居住地。